<template>
    <div>
                <mu-appbar style="width: 100%;" color="primary" fixed>
        <mu-button icon slot="left" to="find">
            <mu-icon value="arrow_back"></mu-icon>
        </mu-button>
        搜索活动
        <mu-button flat slot="right"  >
            <mu-icon value=""></mu-icon>
        </mu-button>
        </mu-appbar>
    <mu-container>
  <mu-text-field v-model="value"  placeholder="搜索内容" icon="search" full-width  @change="Search"></mu-text-field><br/>
</mu-container>
   <div style="margin-top:5px;">
<el-table
v-loading="loading"
    :data="searchs"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="活动地区">
            <span>{{ props.row.area }}</span>
          </el-form-item>
          <el-form-item label="活动地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="联系方式">
            <span>{{ props.row.phone }}</span>
          </el-form-item>
          <el-form-item label="活动类型">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <el-form-item label="报名要求">
            <span>{{ props.row.requirement }}</span>
          </el-form-item>
          <el-form-item label="活动简介">
            <span>{{ props.row.describe }}</span>
          </el-form-item>

        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="发布团队"
      prop="publisher.name">
    </el-table-column>
    <el-table-column
      label="活动名称"
      prop="title">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="contector">
    </el-table-column>
  </el-table>
    </div>
    </div>
</template>
<script>
import axios from "axios";
import Toast from "muse-ui-toast";
export default {
    data(){

return{
    value:'',
    searchs:[],
    loading:false,
}
    },
    methods:{
        Search(){

            if(this.value == ""){
                this.loading=true;
                Toast.error('请选择输入类型且输入要搜索的内容');
                this.loading=false;
            }else{
                this.loading=true;
                axios.post('/api/activity/search',{
                    value:this.value,
                }).then(result=>{
                    if(result.data.length==""){
                        this.searchs = result.data
                        console.log("空空如也")
                        this.loading=false;
                    }else{
                        console.log(result.data)
                        this.searchs = result.data
                        this.searchs.reverse()//数组倒序
                        this.loading=false
                    }
                })
            }
        },
    }

}
</script>
<style>

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>